<template>
  <div class="goods_container">
    <div class="goods_wrapper">
      <div class="goods_item_box" v-for="(item, index) in goods" :key="index" @click="onClickDetails(item.id)">
        <img :src="item.pic" />
        <div class="goods_item_bottom">
          <div class="item_title">{{ item.name }}</div>
          <div class="item_price">￥{{ item.minPrice }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    goods: {
      type: Array,
      required: true,
    },
  },
  mounted() {
    console.log(this.goods);
  },
  methods: {
    onClickDetails(id){
      this.$router.pushRouteByQuery("/popularityDetails",id)
    }
  },
};
</script>
<style lang="scss" scoped>
.goods_container {
  width: 100%;
  .goods_wrapper {
    width: 100%;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
    background: whitesmoke;
    .goods_item_box {
      background: white;
      width: 48%;
      height: 12rem;
      margin-top: 0.2rem;
      //   background: red;
      img {
        width: 100%;
        height: 80%;
      }
      .goods_item_bottom {
        width: 100%;
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        .item_title {
          font-size: 0.65rem;
          width: 100%;
          white-space: nowrap; //强制不换行
          overflow: hidden; //超出部分隐藏
          text-overflow: ellipsis; //显示‘...’
        }
        .item_price {
          font-size: 0.65rem;
          color: red;
        }
      }
    }
  }
}
</style>